Cuando pruebo componentes con <Link> s, por ejemplo, en mi respuesta al Enfoque recomendado para pruebas basadas en rutas dentro de rutas de react-router , a menudo uso el siguiente patrón para obtener acceso a la location actual con fines de prueba:
const renderInRouter = () => { const history = createMemoryHistory(); const wrapper = render( <Router history={history}> <MyPage /> </Router> ); return { ...wrapper, history }; }Esto funcionó bien hasta v5.3, pero después de actualizar a v6 obtengo:
FAIL ./demo.test.js ✕ works (205 ms) ● works TypeError: Cannot read properties of undefined (reading 'pathname') at Router (../packages/react-router/index.tsx:281:5) ... Este caso de uso no está cubierto en los documentos de migración , v6 no tiene guías de prueba hasta el momento y, aunque la referencia de la API muestra que ya no se espera el accesorio de history :
interface RouterProps { basename?: string; children?: React.ReactNode; location: Partial<Location> | string; navigationType?: NavigationType; navigator: Navigator; static?: boolean; } no está claro cuál es el equivalente v6; Intenté cambiar a navigator={history} pero aún recibí el mismo error.
Para reproducir, copie los siguientes archivos en un nuevo directorio y ejecute npm install y luego npm test :
package.json
{ "name": "router6-demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "jest" }, "jest": { "testEnvironment": "jsdom" }, "babel": { "presets": [ "@babel/preset-react" ] }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@babel/preset-react": "^7.16.0", "@testing-library/react": "^12.1.2", "jest": "^27.3.1", "react": "^17.0.2", "react-dom": "^17.0.2", "react-router-dom": "^6.0.0" } } index.test.js :
const { render } = require("@testing-library/react"); const { createMemoryHistory } = require("history"); const React = require("react"); const { Router } = require("react-router-dom"); it("used to work", () => { render( <Router history={createMemoryHistory()}></Router> ); }); Si npm install --save-dev react-router@5 y ejecuta npm test nuevamente, puede ver que esto pasa en v5.
React Router v6 divide el historial en varias partes, para este caso de uso, las partes relevantes son el navegador y la ubicación . Este cambio se insinúa en Use useNavigate en lugar de useHistory , y puede verlo en la definición del tipo de Navigator utilizado en los accesorios del Router :
export declare type Navigator = Omit<History, "action" | "location" | "back" | "forward" | "listen" | "block">; Simplemente cambiando history={history} a navigator={history} aún dejaba el accesorio de location , desde el cual el enrutador intentaba acceder al nombre de la pathname ( entre otras propiedades ), sin definir. Para que la prueba vuelva a funcionar, actualice la representación de la siguiente manera:
const { render } = require("@testing-library/react"); const { createMemoryHistory } = require("history"); const React = require("react"); const { Router } = require("react-router-dom"); it("works", () => { const history = createMemoryHistory(); render( <Router location={history.location} navigator={history}></Router> ); });Esta es mi solución al problema, de un curso que he estado siguiendo en Udemy:
const { render } = require("@testing-library/react"); const { createBrowserHistory } = require("history"); const React = require("react"); const { unstable_HistoryRouter: HistoryRouter } = require("react-router-dom"); it("works", () => { const history = createBrowserHistory(); render( <HistoryRouter history={history}></HistoryRouter> ); });